<template>

  <div>
    <el-form :inline="true">
      <!-- <el-form-item>
        <el-button
          size="small"
          type="primary"
        >筛选</el-button>
      </el-form-item> -->
      <el-form-item>
        <el-button
          size="small"
          type="primary"
          @click="exportExcel()"
        >导出</el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          size="small"
          type="primary"
          @click="print()"
        >打印</el-button>
      </el-form-item>

      <el-form-item>
        <el-radio-group
          size="small"
          v-model="dataForm.isDay"
          @change="monthChange"
        >
          <!-- <el-radio-button label="全部"></el-radio-button> -->
          <el-radio-button label="日"></el-radio-button>
          <el-radio-button label="月"></el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-form-item v-if="dataForm.isDay=='日'">
        <el-radio-group
          size="small"
          v-model="dataForm.selDateAdd"
          @change="getReportFormData()"
        >
          <!-- <el-radio-button label="全部"></el-radio-button> -->
          <el-radio-button label="今日"></el-radio-button>
          <el-radio-button label="昨日"></el-radio-button>
          <el-radio-button label="本周"></el-radio-button>
          <el-radio-button label="其他"></el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-form-item v-if="dataForm.selDateAdd == '其他'&& dataForm.isDay=='日'">

        <el-date-picker
          size="small"
          value-format="timestamp"
          type="date"
          placeholder="开始日期"
          v-model="dataForm.startDate"
          @change="getReportFormData()"
        ></el-date-picker>
        <el-date-picker
          size="small"
          value-format="timestamp"
          v-model="dataForm.endDate"
          type="date"
          placeholder="结束日期"
          @change="getReportFormData()"
        ></el-date-picker>
      </el-form-item>
      <el-form-item v-if="dataForm.isDay=='月'">
        <el-date-picker
          size="small"
          value-format="timestamp"
          type="month"
          placeholder="开始月份"
          v-model="dataForm.startDate"
          @change="getReportFormData()"
        ></el-date-picker>
        <el-date-picker
          size="small"
          value-format="timestamp"
          v-model="dataForm.endDate"
          type="month"
          placeholder="结束月份"
          @change="getReportFormData()"
        ></el-date-picker>
      </el-form-item>
    </el-form>
    <el-table
      :data="reportFormData"
      style="width: 100%"
      align="center"
      id="out-table"
    >
      <el-table-column
        :label="seller.name+'营业报表'"
        align="center"
      >
        <el-table-column
          prop="time"
          label="营业日"
          align="center"
          :formatter="filterTime"
        >
        </el-table-column>
        <el-table-column
          :label="'总房数：'+count"
          align="center"
        >
          <el-table-column
            prop="rentCount"
            label="平均房价"
            align="center"
          >
            <template slot-scope="scope">

              {{scope.row.checkInNumber!=null?parseFloat(scope.row.rentCount/scope.row.checkInNumber).toFixed(2):0}}
            </template>
          </el-table-column>
          <el-table-column
            prop="checkInNumber"
            label="入住率"
            align="center"
          >
            <template slot-scope="scope">
                {{parseFloat(scope.row.checkInNumber/count*100).toFixed(2)+'%'}}


            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column
          prop="roomPrice"
          label="预收款收支"
          align="center"
        >
          <template slot-scope="scope">
            <el-link
              type="primary"
              :underline="false"
              @click="showDetails('1',scope.row.time)"
            >{{scope.row.roomPrice==null?0:scope.row.roomPrice}}</el-link>
          </template>

        </el-table-column>
        <el-table-column
          prop="depositPrice"
          label="押金收支"
          align="center"
        >
          <template slot-scope="scope">
            <el-link
              type="primary"
              :underline="false"
              @click="showDetails('2',scope.row.time)"
            >{{scope.row.depositPrice==null?0:scope.row.depositPrice}}</el-link>
          </template>
        </el-table-column>
        <el-table-column
          prop="nonPrice"
          label="非房间账收支"
          width="300"
          align="center"
        >
          <template slot-scope="scope">
            <el-link
              type="primary"
              :underline="false"
              @click="showNonInout(scope.row.time)"
            >{{scope.row.nonPrice==null?0:scope.row.nonPrice}}</el-link>
          </template>
        </el-table-column>
        <el-table-column
          prop="addressPrice"
          label="现付账"
          width="300"
          align="center"
        >
          <template slot-scope="scope">
            <el-link
              type="primary"
              :underline="false"
              @click="showCashDetail(scope.row.time)"
            >{{scope.row.addressPrice==null?0:scope.row.addressPrice}}</el-link>
          </template>
        </el-table-column>
        <el-table-column
          label="小计"
          align="center"
        >
          <template slot-scope="scope">
            {{scope.row.roomPrice+scope.row.depositPrice+scope.row.nonPrice+scope.row.addressPrice}}
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
    <cashList
      v-if="cashBillsListVisible"
      ref="cashs"
    >
    </cashList>
    <accounts
      v-if="accountsVisible"
      ref="details"
    ></accounts>
    <noninoutList
      v-if="noninoutListVisible"
      ref="noninouts"
    >
    </noninoutList>
    <iframe
      id="print-iframe"
      style="display: none;"
    ></iframe>
  </div>

</template>

<script>
import Moment from 'moment'
import accounts from './accounts'
import noninoutList from './nonInoutList'
import cashList from './cashBillsList'
import FileSaver from "file-saver";
import XLSX from "xlsx";
import downloadfn from './downExcel'
export default {
  data () {
    return {
      reportFormData: [],
      count: 0,
      dataForm: {
        startDate: '',
        endDate: '',
        selDateAdd: '今日',
        isDay: '日'
      },
      accountsVisible: false,
      noninoutListVisible: false,
      cashBillsListVisible: false,
      seller: {},
      tableHeader: [
        { name: '营业日', field: 'sellerName' },
        { name: '平均房价', field: 'outTradeNo' },
        { name: '入住率', field: 'memberZSName' },
        { name: '预收款收支', field: 'memberTel' },
        { name: '押金收支', field: 'czMoney' },
        { name: '非房间帐收支', field: 'zsMoney' },
        { name: '现付账', field: 'addressPrice' },
        { name: '小计', field: 'membercardNo' }
      ],
      fileName: "testExcel",
      config: {
        colwidth: [
          { wpx: 169 },
          { wpx: 63 },
          { wpx: 203 },
          { wpx: 128 },
        ],
        _this: this
      },
      title: ["营业日", "平均房价", "入住率", "预收款收支", "押金收支", "非房间帐收支", "现付账", "小计"]
    }
  },
  components: { cashList, accounts, noninoutList, },
  methods: {
    getReportFormData () {
      this.$http({
        url: this.$http.adornUrl('/hotel/thotelfloorroomcheckinaccounting/reportFormAll'),
        method: 'get',
        params: this.$http.adornParams({
          ...this.dataForm
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.reportFormData = data.forms  //表格数据
          this.count = data.count  //房间数量
          this.seller = data.seller
          console.log(data)
        } else {

        }
      })
    },
    //预收款收支
    showDetails (type, time) {
      console.log(type, time)
      this.accountsVisible = true
      this.$nextTick(() => {
        this.$refs.details.init(type, time, this.dataForm.isDay)
      })
    },
    //非房间帐
    showNonInout (time) {
      this.noninoutListVisible = true
      this.$nextTick(() => {
        this.$refs.noninouts.init(time, this.dataForm.isDay)
      })
    },
    //现付账
    showCashDetail (time) {
      this.cashBillsListVisible = true
      console.log(this.$refs)
      this.$nextTick(() => {
        this.$refs.cashs.init(time, this.dataForm.isDay)
      })
    },
    monthChange () {
      this.dataForm.startDate = ''
      this.dataForm.endDate = ''
      this.$nextTick(() => {
        this.getReportFormData();
      })

    },
    filterTime (row, column, cellValue, index) {
      var patt = 'YYYY-MM-DD'
      if (this.dataForm.isDay != "日") {
        patt = 'YYYY-MM'
      }
      return Moment(row.time).format(patt)
    },
    exportExcel () {
      /* 从表生成工作簿对象 */




      var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));


      // downloadfn(XLSX.utils.sheet_to_json(wb['Sheets']['Sheet1']), this.config);

      // return

      /* 获取二进制字符串作为输出 */


      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        align: 'center',
        type: "array"
      });
      try {
        FileSaver.saveAs(
          //Blob 对象表示一个不可变、原始数据的类文件对象。
          //Blob 表示的不一定是JavaScript原生格式的数据。
          //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
          //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
          new Blob([wbout], { type: "application/octet-stream" }),
          //设置导出文件名称
          '营业报表.xlsx'
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },
    printContent () {
      let wpt = document.querySelector('#out-table');
      let newContent = wpt.innerHTML;
      let oldContent = document.body.innerHTML;

      document.body.innerHTML = newContent;
      window.print(); //打印方法
      // window.localtion.reload();
      history.go(0)
      document.body.innerHTML = oldContent;
    },
    getUserSeller(){
      
    },
    print () {
      var style = [
        '<style>',
        'body{font-size: 12px; color: #666;}',
        'table{width: 100%; border-collapse: collapse; border-spacing: 0;}',
        'th,td{line-height: 20px; padding: 9px 15px; border: 1px solid #ccc; text-align: left; font-size: 12px; color: #666;}',
        'a{color: #666; text-decoration:none;}',
        '*.layui-hide{display: none}',
        '</style>'
      ].join('');
      //标题
      // var title='<div>充值明细</div>'

      //头部html
      var table = '<table cellspacing="0" cellpadding="0" border="0" class="el-table__header" style="width:100%;"><thead class="has-gutter"><tr class="">';
      table += '<th style="text-align:center;line-height:38px;font-size:20px;font-weight:bold;" colspan="12" >' + this.seller.name + '营业报表</th>';

      table += '</tr><tr class="">';
      this.tableHeader.forEach((item, index) => {
        table += '<th colspan="1" rowspan="1" class="el-table_1_column_2  is-center is-leaf"><div class="cell">' + item.name + '</div></th>';
      });
      table += '</tr></thead><tbody>';

      this.reportFormData.forEach((item, index) => {
        table += '<tr class=""><td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' + '<span>' + item.time + '</span></div>' + '</td>';
        table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' + '<span>' + (item.checkInNumber != null ? parseFloat(item.rentCount / item.checkInNumber).toFixed(2) : 0) + '</span></div>' + '</td>';
        table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' + '<span>' + parseFloat(item.checkInNumber / this.count * 100).toFixed(2) + '</span></div>' + '</td>';
        table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' + '<span>' + (item.roomPrice == null ? 0 : item.roomPrice) + '</span></div>' + '</td>';
        table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' + '<span>' + (item.depositPrice == null ? 0 : item.depositPrice) + '</span></div>' + '</td>';
        table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' + '<span>' + (item.nonPrice == null ? 0 : item.nonPrice) + '</span></div>' + '</td>';
        table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' + '<span>' + (item.addressPrice == null ? 0 : item.addressPrice) + '</span></div>' + '</td>';
        table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' + '<span>' +
          ((item.roomPrice == null ? 0 : item.roomPrice) +
            (item.depositPrice == null ? 0 : item.depositPrice) +
            (item.nonPrice == null ? 0 : item.nonPrice) +
            (item.addressPrice == null ? 0 : item.addressPrice)) +
          '</span></div>' + '</td>';
        table += '</tr>';
        console.log(item);
      });

      table += '</tbody></table>';
      table +=
        '<div style="width: 100%;text-align: right;">' +
        '<span style="margin-right: 20px;">打印时间：' +
        Moment(new Date()).format("YYYY-MM-DD HH:mm:ss") +
        '</span>' +
        '<span>打印人：' +
        this.$store.state.user.name +
        '</span>' +
        '</div>';

      var iframe = document.getElementById('print-iframe');
      var doc = null;
      document.body.appendChild(iframe);
      doc = iframe.contentWindow.document;
      doc.write(style + table);
      doc.close();
      iframe.contentWindow.focus();
      iframe.contentWindow.print();
      if (navigator.userAgent.indexOf('MSIE') > 0) {
        document.body.removeChild(iframe);
      }
    }
  },
  mounted () {
    this.getReportFormData()
  }
}
</script>